// React中的事件处理

/*
    React元素的事件处理和DOM元素的很相似。但是有一点语法上的不同:
        · React事件绑定属性的命名采用驼峰式写法，而不是小写。
        · 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)

    在React中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。

    注意JSX中回调函数里的this，类的方法默认是不会绑定this的。如果你忘记绑定this.changeToggle并把它传入onClick, 当你调用这个函数的时候this的值会是undefined。
*/

// 我们来写一个开关
import React, {Component} from 'react';

class Events extends Component {
    constructor(props){
        super(props);
        this.state = {
            isToggleOn: true
        }
        // 下面的bind(绑定)是必须的，让this在回调中可以正确使用
        this.changeToggle = this.changeToggle.bind(this);
    }
    changeToggle(){
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }))
    }

    // 我们来写一个包含事件对象的函数
    // 通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面
    demo(id, e){
        console.log(id, e)
    }

    render(){
        // 事件对象e在使用bind时，作为第二个参数隐式地传递给函数，请看demo函数。
        return (
            <div>
                <span>
                    {this.state.isToggleOn ? "关闭状态" : "开启状态"}
                </span>
                <button onClick={this.changeToggle}>
                    {this.state.isToggleOn ? "ON" : "OFF"}
                </button>

                <button onClick={this.demo.bind(this, 666)}>打印事件对象</button>
                我是Events组件
            </div>
        )
    }
}

export default Events;